<template>
  <div class="tophead">
    <!--    头部的左部分-->
    <div class="th-l" @click="backAction"><i class="iconfont icon-dituhdpi"></i></div>
    <!--    头部的中间部分-->
    <div class="th-title">{{title}}</div>
    <!--    头部的右部分-->
    <div class="th-r" @click="toSpectrum"><i class="iconfont icon-shujutupu"></i></div>
  </div>
</template>

<script>
export default {
  name: "tophead",
  props:["title"],
  data(){
    return{};
  },
  methods:{
    backAction(){
      this.$router.push("/")
    },
    toSpectrum(){
      //跳转至知识图谱页面
      this.$router.push("/spectrum")
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/style/main";

.tophead{
  display: flex;
  justify-content: space-between;
  height: $th;
  line-height: $th;
  color: #fff;
  font-size: $text-size-imp;
  background-color: #0086b3;
  .th-title{
    text-align: center;
    //进行缩放——可以省略
    flex: 1 1 auto;
  }
  .th-l{
    //设置左边图标边距：25像素
    padding-left: px2rem(25);
  }
  .th-r{
    //设置右边图标边距：25像素
    padding-right: px2rem(25);
  }
  .icon::before{
    font-size: px2rem(36);
  }
}


</style>